<template>
    <div>
        <el-upload
            :action="upLoadUrl"
            :drag="drag"
            :list-type="listType"
            :limit="limit"
            :file-list="filelist"
            :before-upload="beforeUploadFile"
            :on-remove="handleRemove"
            :on-exceed="onExceed"
            :accept="accept"
            :auto-upload="true"
            :http-request="uploadFile"
            ref="myFile"
        >
            <div v-if="!drag">
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{ file }">
                    <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                    <span class="el-upload-list__item-actions">
                        <span v-if="fileType == 'image'" class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                            <i class="el-icon-zoom-in"></i>
                        </span>
                        <!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
            <i class="el-icon-download"></i>
            </span>-->
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                            <i class="el-icon-delete"></i>
                        </span>
                    </span>
                </div>
            </div>
            <div v-else>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
    </div>
</template>
<script>
    import { upload } from "@/api/common";

    export default {
        props: {
            filelist: {
                type: Array,
            },
            fileType: {
                type: String,
                default: "",
            },
            listType: {
                type: String,
            },
            drag: {
                type: Boolean,
                default: false,
            },
            accept: {
                type: String,
                default: "",
            },
            limit: {
                type: Number,
                default: 1,
            },
        },
        data() {
            return {
                upLoadUrl: "",
                dialogImageUrl: "",
                dialogVisible: false,
                disabled: false,
                myFileList: [],
                isError: false,
                file: null,
            };
        },
        methods: {
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            async beforeUploadFile(file) {
                console.log(file);
                if (!file) {
                    return false;
                } else {
                    const { size } = file,
                        isLt50M = file.size / 1024 / 1024 <= 1000;
                    if (!isLt50M) {
                        this.$message.error("上传文件不能超过1G！");
                    }
                    this.file = file;
                }
            },
            async uploadFile() {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                    background: "rgba(0, 0, 0, 0.7)",
                });
                let res = await upload({ file: this.file, type: this.fileType });
                if (res.code !== 1) {
                    loading.close();
                    this.$message.error(res.msg);
                } else {
                    loading.close();
                    this.$message.success("上传成功");
                    this.myFileList.push({ url: res.data });
                    this.$emit("fileListChange", this.myFileList);
                }
            },
            async handleRemove(file) {
                let fileList = this.$refs.myFile.uploadFiles;
                // let result = await Common.delUpLoadImg({ delFileName: name });
                let index = fileList.findIndex((item) => {
                    return item.uid === file.uid;
                });
                this.myFileList.splice(index, 1);
                this.$emit("fileListChange", []);
            },
            onExceed(files, list) {
                this.$message.warning(`上传文件数超过限制数${this.limit}！`);
            },
        },
    };
</script>
<style lang='scss' scoped>
</style>